<template>
    <div class="page-payType">
        <div class="pay-box">
            <div class="item" @click="btnOpen(1)">
                <img src="/images/detail/s02.png" />
                <div class="name" v-t="'setUp.title1'">Set Up Ad Slot Payment Rules</div>      
            </div>
             <div class="item" @click="btnOpen(2)">
                <img src="/images/detail/s01.png" />
                 <div class="name" v-t="'setUp.title2'">Advertising Reward Distribution Rules</div>
             </div>
        </div>
         <div class="view-pupop" v-if="openType">
             <div class="title" v-t="'setUp.title1'">Set Up Ad Slot Payment Rules</div>
             <div class="title-box" v-t="'setUp.title3'">Please set the CPC payment reward rules for advertising space</div>
             <div class="name" v-t="'setUp.title4'">Daily reward for each UV click</div>
             <div class="ipt-box"> <input v-model="saveForm.adUvPrice" maxlength="8" max="9999999" type="number"  /><span class="icon"></span> </div>
             <div class="btn-view">
                  <div class="btn-cancel" @click="openType=false"></div>
                   <div class="btn-confim" @click="btnSave"></div>
             </div>
        </div>
         <div class="view-pupop-next" v-if="openTypeNext">
              <div class="title" v-t="'setUp.title5'">DAO Member Advertising Reward Distribution Rules</div>
             <div class="name-tip" v-t="'setUp.title6'">UV traffic contributor advertising reward distribution ratio (100%)</div>
             <div class="ipt-item">
                    <div class="item">
                        <div class="label" v-t="'setUp.title7'">Ad slot holder</div>
                        <input v-model="saveNextForm.adOwnerAward" type="number" maxlength="8" max="9999999" /><span>%</span>
                    </div>
                    <div class="item"><div class="label" v-t="'setUp.title8'">Landmark Holder</div><input v-model="saveNextForm.adLandmarkOwnerAward" type="number" maxlength="8" max="9999999" /><span>%</span></div>
                    <div class="item"><div class="label" v-t="'setUp.title9'">Traffic Contributor</div><input v-model="saveNextForm.adVisitAward" type="number" maxlength="8" max="9999999"  /><span>%</span></div>
                    <div class="item"><div class="label" v-t="'setUp.title10'">DAO Creator</div><input v-model="saveNextForm.adDaoOwnerAward" type="number" maxlength="8" max="9999999" /><span>%</span></div>
                    <div class="item"><div class="label" v-t="'setUp.title11'">DAO Member</div><input v-model="saveNextForm.adDaoMemberAward" type="number" maxlength="8" max="9999999"  /><span>%</span></div>
                    <div class="item on"><div class="label" v-t="'setUp.title12'">Advertisers</div><input disabled v-model="saveNextForm.adAdvertiserAward" type="number" maxlength="8" max="9999999" /><span>%</span></div>
                    <div class="item on"><div class="label" v-t="'setUp.title13'">Collext</div><input disabled v-model="saveNextForm.adCollextAward" type="number" maxlength="8" max="9999999" /><span>%</span></div>
             </div>
             <div class="btn-view">
                  <div class="btn-cancel" @click="openTypeNext=false"></div>
                   <div class="btn-confim" @click="btnNextSave"></div>
             </div>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,ref,getCurrentInstance,onMounted,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import { toast,H5CallAPPFuction } from '@/utils/common'
import { useI18n } from 'vue-i18n'

export default {
    components:{},
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const addView = ref(null);
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            saveForm:{
                adUvPrice:'0.1',
                arLandmarkId: '',
                configLevel: 2,
                walletAddress: computed(()=>store.state.base.userInfo.walletAddress)
           },
           saveNextForm:{
                adAdvertiserAward: 5,
                adCollextAward: 5,
                adDaoMemberAward: '5',
                adDaoOwnerAward: '5',
                adLandmarkOwnerAward: '5',
                adOwnerAward: '20',
                adVisitAward: '55',
                arLandmarkId: '',
                configLevel: 2,
                walletAddress: computed(()=>store.state.base.userInfo.walletAddress)
           },
           openType:false,
           openTypeNext:false,
        })
        onMounted(()=>{
            //广告位
            if(route.query.id){
               state.saveForm.arLandmarkId  =route.query.id||''
               state.saveNextForm.arLandmarkId  =route.query.id||''
            }else{
              state.saveForm.configLevel= 1
              state.saveNextForm.configLevel= 1
              state.saveForm.arLandmarkId  =route.query.arLandmarkId||''
              state.saveNextForm.arLandmarkId  =route.query.arLandmarkId||''
            }

        })
       const btnOpen =(index)=>{
            if(index==1){
                state.openType = true
            }else{
                state.openTypeNext = true
            }
       }
        const btnSave =(index)=>{
            if(state.saveForm.adUvPrice==''||state.saveForm.adUvPrice==0){
                //toast('Please Set Reward Value')
                toast(t('setUp.tip1'))
                return
            }
            if(state.saveForm.adUvPrice<0.1){
                toast(t('setUp.tip1'))
                //toast('Value cannot be less than 0.1')
                return
            }
            state.saveForm.adUvPrice = state.saveForm.adUvPrice+''
              store.dispatch('customer/editAdLandmarkConfigCPC',state.saveForm).then(res=>{
                 if(res.success){
                    toast('success')
                    state.openType = false
                }else{
                    toast(res.message)
                }
            })
       }
      const btnNextSave =(index)=>{
                if(state.saveNextForm.adDaoMemberAward===''){
                   // toast('Please Set DAO Member')
                    toast(t('setUp.tip3'))
                    return
                }
                if(state.saveNextForm.adDaoOwnerAward===''){
                    toast(t('setUp.tip4'))
                   // toast('Please Set DAO Creator')
                    return
                }
                if(state.saveNextForm.adLandmarkOwnerAward==''||state.saveNextForm.adLandmarkOwnerAward==0){
                    //toast('Please Set Landmark Holder')
                    toast(t('setUp.tip5'))
                    return
                }
                if(state.saveNextForm.adOwnerAward==''||state.saveNextForm.adOwnerAward==0){
                    //toast('Please Set Ad slot holder')
                    toast(t('setUp.tip6'))
                    return
                }
                if(state.saveNextForm.adVisitAward==''||state.saveNextForm.adVisitAward==0){
                    //toast('Please Set Traffic Contributor')
                    toast(t('setUp.tip7'))
                    return
                }

               
              store.dispatch('customer/editAdLandmarkConfigAward',state.saveNextForm).then(res=>{
                 if(res.success){
                    toast('success')
                    state.openTypeNext = false
                }else{
                    toast(res.message)
                }
            })
       }

        return{
            ...toRefs(state),
            btnOpen,
            btnSave,
            btnNextSave
        }
    }
}
</script>


<style lang="scss" scoped>
 
 .page-payType{
     width:100%;
     height:100%;
     .pay-box{
            display: flex;
            margin:0 auto;
            width:80%;
            justify-content: space-between;
            align-self: center;
            align-items: center;
            height: 100%;
            .item{
                width:49%;
                height:240px;
                background-color: #004AD9;
                text-align: center;
                padding:48px 50px;
                img{
                    width:70px;
                    vertical-align:middle;
                }
            }
        }
 }
 .view-pupop-next,
 .view-pupop{
     width:720px;
     height:440px;
     position: absolute;
     z-index:999;
     left:50%;
     top:50%;
     margin-top:-200px;
     margin-left:-200px;
     color:#333;
     padding:30px;
     background-image: url('/images/dgbg4.png');
     background-position: center;
     background-repeat: no-repeat;
     background-size: 100% 100%;
     .title{
         color:#fff;
         font-size:28px;
     }
     .title-box{
        font-weight: 500;
        font-size:24px;
        color:#fff;
        background: #67F8FF50;
        padding:12px;
     }
     .name{
         color: #FFFFFF;
         font-weight: 500;
        font-size:24px;
        margin:20px 0;
     }
     
     .ipt-box{
         border:1px solid #67F8FF;
         height:60px;
         line-height:60px;
         width:100%;
         overflow: hidden;
         position: relative;
         input{
             background-color: transparent;
             border: none;
             font-size:24px;
             color:#fff;
             padding:0 10px;
         }
         .icon{
            background-image: url('/images/zc2.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height:20px;
            width:20px;
            position: absolute;
            right:10px;
            top:50%;
            margin-top:-10px;
         }
     }
     .btn-view{
         display: flex;
         justify-content:space-around;
         width:400px;
         margin:40px auto 0 auto;
         .btn-cancel,
         .btn-confim{
            text-align: center;
            height:60px;
            line-height:60px;
            width:160px;
            background-image: url('/images/detail/confim.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
         }
         .btn-cancel{
              background-image: url('/images/adRelease/grid-cancel.png');
         }
     }
     
 }
  .view-pupop-next{
       width:900px;
       height:700px;
       margin-top:-350px;
       margin-left:-450px;
       .name-tip{
        color: #67F8FF;
        font-weight: 500;
        font-size:24px;
        margin:20px 0;
     }
     .ipt-item{
         display: flex;
         justify-content: flex-start;
         flex-flow: wrap;
         .item{
             width:280px;
             margin-bottom:10px;
             position: relative;
             .label{
                 font-size:24px;
                 color:#fff;
                 padding:6px 0;
             }
             input{
                 width:260px;
                 border:1px solid #67F8FF;
                 background-color: transparent;
                 height:80px;
                 line-height:80px;
                 font-size:24px;
                 padding:0 40px 0 10px;
                 color:#fff;
             }
             span{
                 position: absolute;
                 right:40px;
                 color:#fff;
                 font-size:24px;
                 height:30px;
                 top:70px;
             }
         }
         .on{
              input{
                background-color: #67F8FF50;
                border:1px solid #67F8FF50;
              }
         }
     }
  }
</style>